import React, { useState } from 'react';

import { Button, Card, Divider, Form, Space } from 'antd';

import type { UploadFile } from 'antd';

const UploadExample: React.FC = () => {
	const [form] = Form.useForm();
	const [businessLicense, setBusinessLicense] = useState<UploadFile[]>([]);
	const [socialCreditCode, setSocialCreditCode] = useState<UploadFile[]>([]);

	const handleSubmit = async (values: any) => {
		console.log('表单数据:', {
			...values,
			businessLicense,
			socialCreditCode
		});
	};

	return (
		<div style={{ padding: '24px', maxWidth: '800px', margin: '0 auto' }}>
			<Card title="机构证件上传">
				<Form form={form} layout="vertical" onFinish={handleSubmit}>
					{/* 营业执照上传 */}
					<Form.Item label="营业执照" required extra="请上传营业执照的清晰照片或扫描件">
						<CustomUpload
							value={businessLicense}
							onChange={setBusinessLicense}
							acceptTypes={['image/jpeg', 'image/png', 'application/pdf']}
							maxCount={1}
							maxSize={10}
							listType="picture-card"
							uploadText="上传营业执照"
							placeholder="支持JPG、PNG、PDF格式，文件大小不超过10MB"
							action="/api/upload/business-license"
						/>
					</Form.Item>

					<Divider />

					{/* 统一社会信用代码证上传 */}
					<Form.Item
						label="统一社会信用代码证"
						extra="如果营业执照已包含统一社会信用代码，可不上传此项"
					>
						<CustomUpload
							value={socialCreditCode}
							onChange={setSocialCreditCode}
							acceptTypes={['image/jpeg', 'image/png', 'application/pdf']}
							maxCount={2}
							maxSize={5}
							listType="picture-card"
							uploadText="上传证件"
							placeholder="支持JPG、PNG、PDF格式，最多2个文件，单个文件不超过5MB"
							action="/api/upload/social-credit"
						/>
					</Form.Item>

					<Divider />

					{/* 其他示例：列表形式上传 */}
					<Form.Item label="其他证明文件" extra="可上传其他相关证明文件">
						<CustomUpload
							value={[]}
							onChange={files => console.log('其他文件:', files)}
							acceptTypes={['image/jpeg', 'image/png', 'application/pdf', 'application/msword']}
							maxCount={5}
							maxSize={20}
							listType="text"
							uploadText="选择文件"
							placeholder="支持图片、PDF、Word文档，最多5个文件"
							action="/api/upload/others"
						/>
					</Form.Item>

					<Form.Item>
						<Space>
							<Button type="primary" htmlType="submit">
								提交
							</Button>
							<Button onClick={() => form.resetFields()}>重置</Button>
						</Space>
					</Form.Item>
				</Form>
			</Card>

			{/* 展示不同配置的示例 */}
			<Card title="不同配置示例" style={{ marginTop: '24px' }}>
				<Space direction="vertical" size="large" style={{ width: '100%' }}>
					{/* 只支持图片的上传 */}
					<div>
						<h4>只支持图片上传</h4>
						<CustomUpload
							acceptTypes={['image/jpeg', 'image/png']}
							maxCount={3}
							listType="picture-card"
							uploadText="上传图片"
							placeholder="只支持JPG、PNG格式"
						/>
					</div>

					{/* 圆形头像上传 */}
					<div>
						<h4>头像上传</h4>
						<CustomUpload
							acceptTypes={['image/jpeg', 'image/png']}
							maxCount={1}
							listType="picture-circle"
							uploadText="上传头像"
							placeholder="建议上传1:1比例的图片"
						/>
					</div>

					{/* 文档上传 */}
					<div>
						<h4>文档上传</h4>
						<CustomUpload
							acceptTypes={[
								'application/pdf',
								'application/msword',
								'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
							]}
							maxCount={5}
							listType="text"
							uploadText="选择文档"
							placeholder="支持PDF、Word文档"
						/>
					</div>

					{/* 禁用状态 */}
					<div>
						<h4>禁用状态</h4>
						<CustomUpload disabled uploadText="已禁用" placeholder="当前不可上传" />
					</div>
				</Space>
			</Card>
		</div>
	);
};

export default UploadExample;
